<template>
  <n-config-provider :theme="theme" :theme-overrides="themeOverrides">
    <n-message-provider>
      <layout-shell :dark="dark" @update:dark="updateTheme">
        <router-view />
      </layout-shell>
    </n-message-provider>
  </n-config-provider>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { NConfigProvider, NMessageProvider, darkTheme } from 'naive-ui'
import LayoutShell from './components/LayoutShell.vue'

const dark = ref(true)
const theme = computed(() => dark.value ? darkTheme : null)

const themeOverrides = {
  common: {
    primaryColor: '#7c59ff',
    primaryColorHover: '#9575ff',
    primaryColorPressed: '#6344ff'
  }
}

function updateTheme(value: boolean) {
  dark.value = value
}
</script>
<style>
:root { --primary-color: #7c59ff; }
html, body, #app { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
</style>

